<html></html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<!--[if IE]><script language="javascript" type="text/javascript" src='<?php echo base_url()?>js/jqplot/excanvas.js'></script><![endif]-->

<link rel="stylesheet" type="text/css"
	href="<?php echo base_url()?>js/jqplot/jquery.jqplot.css" />

<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript"
	src="<?php echo base_url()?>js/jqplot/jquery.js"></script>
<!-- END: load jquery -->

<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript"
	src="<?php echo base_url()?>js/jqplot/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript"
	src="<?php echo base_url()?>js/jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript"
	src="<?php echo base_url()?>js/jqplot/plugins/jqplot.ohlcRenderer.js"></script>
<script language="javascript" type="text/javascript"
	src="<?php echo base_url()?>js/jqplot/plugins/jqplot.json2.js"></script>
<script language="javascript" type="text/javascript"


<script language="javascript" type="text/javascript"
	src="<?php echo base_url()?>js/jqplot/plugins/jqplot.ciParser.js"></script>

<script language="javascript" type="text/javascript">
function show_history_chart(title_str, labelX, labelY, typeName){
	$("#historyChart").children().remove();
	$("#historyChart").css("display", "block");
	var history;
	$.ajax({
        async: false,
        url: "<?php echo site_url("personal_health_info/get_history");?>",
        dataType:'json',
        type: 'GET',
        data: "&typeName="+typeName,
        cache: false,
        success: function(ret) {
        	history = ret;
        }
    });
    var historyPlot = $.jqplot('historyChart', history, {
        title: title_str,
        dataRenderer:$.jqplot.ciParser,
        axes: {
            xaxis: {
                renderer:$.jqplot.DateAxisRenderer,
                tickInterval: '1 day',
                tickOptions:{formatString:'%y/%m/%d'},
                label:labelX
                    },
                    yaxis: {
                        label:labelY
                            }
                    },
                    series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
                    });
};</script>

<style type="text/css">
div.inputRow {
	width: 60%;
	background-color: #C4E1FF;
	font-size: 13pt
}

label {
	text-align: left;
}

a {
	margin-left: 10px;
	margin-right: 10px;
}

.health_field {
	width: 50px;
}

#health_data {
	background-color: #C4E1FF;
	width: 700px;
}
</style>
<title>个人健康信息</title>

</head>

<body>

	<div id="historyPanel"
		style="height: 200px; width: 400px; display: none; Z-INDEX: 99; background-color: #ffff">
		<center>
			<div id="historyChart"
				style="height: 200px; width: 400px; Z-INDEX: 99"></div>
			<p>
				<button onclick='d_close("historyPanel")'>关闭</button>
			</p>
		</center>
	</div>
	<center>
		<form>
			<table id="health_data">
				<?php

				function show_health_field_td($field, $health_info)
				{
					echo '<td><label for="field">'.translate_field($field).'</label></td>';
					echo "<td>";
					echo '<input class="health_field" type="text" value="'.get_value_of_field($field, $health_info).'" field="'.$field.'"/>';
					echo '<button type="button" class="modify_link">'."确定".'</button>';
					echo '<a href="#" id="'.$field.'" class="history_link" onclick=\'d_show("'.$field.'","historyPanel"); show_history_chart("'.translate_field($field).'的历史趋势","'.translate_field($field).'","值","'.$field.'"); return false;\'>'."历史".'</a>';
					echo '<input type="checkbox" class="share_chk" field="'.$field.'" '.( field_shared(get_uid(), $field) ? "checked" : "").'>'."分享".'</input>';
					echo "</td>";
				}

				while(true)
				{
					$field1 = null;
					$field2 = null;
					

					while(!valid_field($field1 = current($health_info_fields))){
						if(!$field1)
							break;
						next($health_info_fields);
					}
					
					if($field1)
						next($health_info_fields);

					while(!valid_field($field2 = current($health_info_fields))){
						if(!$field2)
							break;
						next($health_info_fields);
					}
					
					if($field2)
						next($health_info_fields);


					if(!$field1)
						break;

					echo '<tr>';

					show_health_field_td($field1, $health_info);
					echo "<td style=\"text-align:center\">&nbsp&nbsp||&nbsp&nbsp</td>";
					if($field2)
					{
						show_health_field_td($field2, $health_info);
					}

					echo "</tr>";
				}
				?>
			</table>
		</form>
	</center>

	<script type="text/javascript">
	function update_share_status(field, data)
	{
		$.post("<?php echo site_url("eager_for_care/update_share_status");?>", {
		    field: field,
		    data: data
		});
	}
	
	function report_data(field, data)
	{	
		$.post("<?php echo site_url("personal_health_info/update_health_data");?>", {
		    field: field,
		    data: data
		});
	}				
	</script>

	<script type="text/javascript">

function d_show(C_id,D_id) {
  var D_top,D_left,P_heiht,P_width,C_top,C_left,C_heigth,C_width,C_obj,D_obj,D_height,D_width;
  C_obj=$("#"+C_id);    
  D_obj=$("#"+D_id);
  D_height=D_obj.height();    
  D_width=D_obj.width(); 
  C_heigth = C_obj.height();    
  C_width = C_obj.width();
  P_heiht = pageHeight();    
  P_width = pageWidth();

  var globalScrollTop = $(document).scrollTop();
  var globalScrollLeft = $(document).scrollLeft();
  var offset = C_obj.offset();
  C_top = offset.top;
  C_left = offset.left;;
  if(P_heiht + globalScrollTop -(C_top+C_heigth+D_height)>=0) {
      D_top=C_top+C_heigth;        
  }
  else {
      D_top = C_top-D_height;        
  }    
  D_top=D_top+"px";
  if(P_width + globalScrollLeft -(C_left+D_width)>=0) {
      D_left=C_left;
  }
  else {
      if(D_width>=C_width) {
          D_left=C_left-(D_width-C_width);
      }
      else {
          D_left=C_left+C_width;
      }        
  }
  D_left=D_left +"px"; 
  
  D_obj.css({top:D_top,left:D_left,position:"absolute",visibility:"visible",display:"block","z-index":"99", "background-color":"#fff"});
};

function d_close(D_id){
  $("#"+D_id).css("display","none");
}

function pageHeight() {
  if($.browser.msie) {
      return document.compatMode=="CSS1Compat"?document.documentElement.scrollHeight:
          document.body.clientHeight;
  }
  else {
      return self.innerHeight;
  }
};

function pageWidth() {
  if($.browser.msie) {
      return document.compatMode=="CSS1Compat"?document.documentElement.scrollWidth:
          document.body.clientWidth;
  }
  else {
      return self.innerWidth;
  }
};

function browserHeight() {
  if($.browser.msie) {
      return document.compatMode=="CSS1Compat"?document.documentElement.clientHeight:
          document.body.clientHeight;
  }
  else {
      return self.innerHeight;
  }
};

function browserWidth() {
  if($.browser.msie) {
      return document.compatMode=="CSS1Compat"?document.documentElement.clientWidth:
          document.body.clientWidth;
  }
  else {
      return self.innerWidth;
  }
}; 

</script>

	<script type="text/javascript">
$(
		function ()
		{
			$("button.modify_link").click(
					function()
					{
						field = $(this).parent().find("input").attr("field");
						data = $(this).parent().find("input").attr("value");
						report_data(field, data);
						return false;

					}
					);

			$("input.share_chk").click(
					function()
					{
						field = $(this).attr("field");
						checked = this.checked;
						update_share_status(field, checked);
					}
					);
		}
);
</script>

</body>


